<template>
	<view>
		<checkbox-group @change="checkboxChange">
			<view class="" v-for="(item,index) in arr" :key="index" @click="xiangqing(item)">
				<view class="neirong">
					<label class="xuanzhe" v-if="flag">
						<checkbox :checked="item.check" :value="item.id" />
					</label>
					<view class="contents">
						<image :src="item.img||item.image" mode="" class="tu"></image>
						<view class="brief">
							<view class="title">
								<text class="names">{{item.name||item.community}}</text>
								<text class="understate" v-if="item.statusa==2 && item.issue!=0">审核中</text>
								<text class="underfail" v-if="item.statusa==4">审核失败</text>
							</view>
							<view class="area">
								<text> {{item.room}}室{{item.hall}}厅</text>
								<text> {{item.building_area || item.house_area}}m²</text>
								<text>{{item.orientation || ""}}</text>
								<text class="xiaoqu">{{item.community_name || ""}}</text>
							</view>

							<view class="">
								<view class="lablebox">
									<ColorfulLabel :labelArr="item.label"></ColorfulLabel>
								</view>
								<view class="pricebox">
									<view class="total" v-if="item.type==1 || type==1">
										<text>{{item.price || '未知'}}万</text>
									</view>
									<view class="price" v-if="item.type==2 || type==2">
										{{item.price || '未知'}}元/月
									</view>
									<view class="price" v-if="item.type==1 || type==1">
										{{item.unit_price || '未知'}}元/m²
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- <view class="" v-if="item.statusa==3">
						<view class="issue" v-if="item.house.status==0" @click="issue(item)">
							发布
						</view>
						<view class="issue" v-if="item.house.status==1" @click="revocation(item)">
							撤销发布
						</view>
					</view>
 -->
				</view>
				<view class="clinchbox" v-if="flags">
					<view class="takelook" @click="takelook(item)">
						带看记录
					</view>
					<view class="clinchs" @click="clinch(item,index)" v-if="item.jiaoyi==0">
						成交记录
					</view>
					<view class="clinchss" v-if="item.jiaoyi==1">
						待审核
					</view>
					<view class="clinchs" @click="failed(item)" v-if="item.jiaoyi==2">
						审核失败
					</view>
					<view class="clinchsss" v-if="item.jiaoyi==3">
						审核成功
					</view>
				</view>

				<view class="clinchboxs" v-if="item.issue==0">
					<view class="modification" @click="xiugai(item)">
						修改
					</view>
					<view class="release" @click="fabu(item)">
						发布
					</view>
				</view>
				<view class="clinchboxs" v-if="item.issue==1">
					<view class="modification" @click="finishxiugai(item)" v-if="item.statusa!=2">
						修改
					</view>
				</view>
			</view>
		</checkbox-group>

	</view>
</template>

<script>
	import ColorfulLabel from "../ColorfulLabel/index.vue"
	export default {
		data() {
			return {};
		},
		props: {
			flag: {
				type: Boolean,
				default: false
			},
			judge: {
				type: Boolean,
				default: false
			},
			flags: {
				type: Boolean,
				default: false
			},
			type: {
				type: Number,
				default: false
			},
			arr: {
				type: Array,
				default: []
			},
			listlabelArr: {
				type: Array,
				default: []
			}
		},
		methods: {
			checkboxChange(e) {
				this.$emit("selectCallback", e.detail.value)
			},
			xiugai(item){
				this.$emit("xiugai",item)
			},
			fabu(item){
				this.$emit("fabu",item)
			},
			finishxiugai(item){
				this.$emit("finishxiugai",item)
			},
			takelook(item) {
				this.$emit("takelook", item)
			},
			clinch(item, index) {
				this.$emit("clinch", item, index)
			},
			failed(item) {
				this.$emit("failed", item)
			},
			more() {},
			issue(item) {
				this.$emit("issue", item)
			},
			revocation(item) {
				this.$emit("revocation", item)
			},
			xiangqing(item){
				this.$emit("xiangqing", item)
			}
		},
		components: {
			ColorfulLabel
		}
	};
</script>

<style scoped>
	.clinchboxs{
		display: flex;
		justify-content: flex-end;
	}
	.modification {
		width: 130rpx;
		height: 61rpx;
		background-color: #ffffff;
		border-radius: 31rpx;
		border: solid 3rpx #e32d24;
		font-family: MicrosoftYaHei;
		font-size: 26rpx;
		color: #e32d24;
		line-height: 61rpx;
		text-align: center;
		margin-right: 20rpx;
	}

	.release {
		width: 130rpx;
		height: 61rpx;
		background-color: #ffffff;
		border-radius: 31rpx;
		border: solid 3rpx #f28e00;
		font-family: MicrosoftYaHei;
		font-size: 26rpx;
		color: #f28e00;
		text-align: center;
		line-height: 61rpx;
		margin-right: 20rpx;
	}

	.contents {
		display: flex;
		margin-bottom: 34rpx;
		margin-top: 18rpx;
		align-items: center;
	}

	.tu {
		width: 208rpx;
		height: 169rpx;
		border-radius: 10rpx;
	}

	.xiaoqu {
		display: inline-block;
		width: 200rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.contents>.brief {
		margin-left: 35rpx;
		width: 450rpx;
	}

	.brief>.title {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.brief>.title>.names {
		font-size: 28rpx;
		color: #282828;
		font-family: MicrosoftYaHei-Bold;
		font-weight: 700;
		display: inline-block;
		width: 300rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.brief>.title>.understate {
		font-family: MicrosoftYaHei;
		font-size: 20rpx;
		color: #993300;
	}

	.brief>.title>.underfail {
		font-family: MicrosoftYaHei;
		font-size: 20rpx;
		color: #cc3333;
	}

	.brief>.area {
		font-size: 22rpx;
		color: #878787;
		font-family: MicrosoftYaHei-Bold;
		margin-top: 10rpx;
		display: flex;
		align-items: center;
	}

	.brief>.area>text {
		margin-right: 10rpx;
	}

	.lablebox {
		display: flex;
	}

	.pricebox {
		display: flex;
		margin-top: 10rpx;
		/* margin-right: 34rpx; */
	}

	.total {
		color: #e13c35;
		font-size: 18rpx;
		font-family: MicrosoftYaHei;
	}

	.total>text {
		font-size: 30rpx;
		font-weight: 700;
		font-family: PingFang-SC-Heavy;
		margin-right: 25rpx;
	}

	.price {
		font-size: 20rpx;
		font-family: MicrosoftYaHei;
		color: #666666;
		/* margin-left: 34rpx; */
		margin-top: 4rpx;
	}

	.neirong {
		display: flex;
		align-items: center;
	}

	.xuanzhe {
		margin: auto 0;
		margin-right: 20rpx;
	}

	.clinchbox {
		display: flex;
		justify-content: space-between;
	}
	.takelook {
		width: 200rpx;
		height: 61rpx;
		background-color: #ffffff;
		border-radius: 31rpx;
		border: solid 3rpx #f28e00;
		font-family: MicrosoftYaHei;
		font-size: 26rpx;
		color: #f28e00;
		line-height: 61rpx;
		text-align: center;
		margin-left: 250rpx;
	}

	.clinchs {
		width: 200rpx;
		height: 61rpx;
		background-color: #ffffff;
		border-radius: 31rpx;
		border: solid 3rpx #df4744;
		font-family: MicrosoftYaHei;
		font-size: 26rpx;
		color: #df4744;
		line-height: 61rpx;
		text-align: center;
	}

	.clinchss {
		width: 200rpx;
		height: 61rpx;
		background-color: #ffffff;
		border-radius: 31rpx;
		/* border: solid 3rpx #87878; */
		font-family: MicrosoftYaHei;
		font-size: 26rpx;
		color: #87878;
		line-height: 61rpx;
		text-align: center;
	}

	.clinchsss {
		width: 200rpx;
		height: 61rpx;
		background-color: #ffffff;
		border-radius: 31rpx;
		/* border: solid 3rpx #df4744; */
		font-family: MicrosoftYaHei;
		font-size: 26rpx;
		color: #df4744;
		line-height: 61rpx;
		text-align: center;
	}

	.shu {
		margin-left: 5rpx;
		margin-right: 5rpx;
	}

	.change {
		width: 100rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		background-color: #f75653;
		border-radius: 30rpx;
		color: #FFFFFF;
		font-size: 20rpx;
	}

	.issue {
		width: 100rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		background-color: #ffcc00;
		;
		border-radius: 30rpx;
		color: #f69a0a;
		font-size: 20rpx;
	}

	.wait {
		font-size: 20rpx;
		color: #666666;
	}
</style>
